// 插件形式的全局指令
// 插件 + 指令
// 1. 回顾插件的指令 api的变化
// 2. 实现插件的基础安装
// 3. 实现指令的基础配置
// 4. 实现图片懒加载核心逻辑

/*
    vue2:
        定义插件:
            函数定义:
                function plugin(Vue) {
                        插件的逻辑
                }
            对象定义:
                const plugin = {
                    install(Vue) {
                        插件的逻辑
                    }
                }

        注册插件:
            Vue实例化之前, Vue.use(plugin), 当调用use方法时, 实际上是在执行插件的install方法, 并且把Vue构造函数
            本身当成实参传入到插件准备好的形参的位置

            Vue.component() 全局组件注册
            Vue.direactive() 全局指令注册
            Vue.prototype.$http = function() {} 原型挂载方法 - 每个组件都可以通过this去获取使用

    vue3:
        定义插件:
            函数定义:
                function plugin(app) {
                        插件的逻辑
                }
            对象定义:
                const plugin = {
                    install(app) {
                        插件的逻辑
                    }
                }

        注册插件:
            createApp() -> 生成app应用实例对象
            app.use(plugin)
            调用use方法的同时, 会把app实例对象当成实参栓入到install方法的实参位置
 */

/*
    定义群居指令:
        vue2:
            Vue.direactive('指令名称', {
                inserted(el, binding) {
                    el: 指令写到谁身上就代表那个dom元素
                    banding.value: 指令 = 后面表达式的值
                }
            })

            使用指令: v-指令名称

        vue3:
            createApp() -> app
            app.directive('指令名称', {
                mounted(el, binding) {
                    el: 指令写到谁身上就代表那个dom元素
                    banding.value: 指令 = 后面表达式的值
                }
            })

            使用指令: v-指令名称
  */
import { useIntersectionObserver } from '@vueuse/core'

const plugin = {
  install (app) {
    // 插件逻辑
    // console.log(app)
    // app : component / direactive
    app.directive('img-lazy', {
      mounted (el, binding) {
        // console.log(el, binding.value)
        // el: img - dom对象
        // banding.value: 图片的url地址
        // 图片懒加载
        // 核心思路：进入到视口区域的图片才正式加载
        // 技术方案： 1. 如何监控图片进入到了视口区域 2.如何让图片发起正式请求
        // 解决方案： 1. vueuse解决监听图片进入视口区域的问题 2.给img.src = 'url'
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            //  isIntersecting: 进入true 出去 false
            // console.log(isIntersecting)
            // 监听一直都在 除非手动停止
            // 监听是非常精确的 不管是横向还是纵向都可以监听到

            if (isIntersecting) {
              el.src = binding.value
              // 完成首次加载之后 停止监听
              stop()
            }
          },
          // 被监听的元素到底进入到多大面积才开始执行回调
          // 0 - 1 值越小 要求的面积就越小
          { threshold: 0 }
        )
      }
    })
  }
}

export default plugin
